import { ReactComponentExt } from '@helpers/ReactExt'
import { storage } from '@helpers/storage'
import { GlobalStoreModel } from '@store/globalStore'
import { BaseProps, ComponentStore } from '@store/store'
import { Icon, Upload } from 'antd'
import { UploadFile } from 'antd/lib/upload/interface'
import { configs } from 'config'
import { inject, observer } from 'mobx-react'
import * as React from 'react'

// tslint:disable-next-line:no-empty-interface
export interface UploadWrapperProps extends BaseProps {
  count: number
  disabled: boolean
  fieldname: string
  onPreview: (file: UploadFile) => void
  onSuccess: (fieldname: string, fileList: UploadFile[]) => void
  onUploading: (fieldname: string, fileList: UploadFile[]) => void
  acceptType?: string
  globalStore?: GlobalStoreModel
  fileList?: UploadFile[]
}

interface UploadWrapperState {
  loading: boolean
  imageUrl: string
  fileList: UploadFile[]
}

@inject((store: ComponentStore) => {
  return { globalStore: store.globalStore }
})
@observer
export class UploadWrapper extends ReactComponentExt<UploadWrapperProps, UploadWrapperState> {

  public static getDerivedStateFromProps(nextProps: any) {
    const { fileList } = nextProps
    if (fileList && fileList.length === 0 || !fileList) {
      return { fileList: [] }
    }
    return { fileList }
  }

  public init(): void {
    // todo
    this.state = {
      loading: false,
      imageUrl: '',
      fileList: []
    }
    this.handleChange = this.handleChange.bind(this)
    this.handlePreview = this.handlePreview.bind(this)
  }

  public componentDidMount() {
    // todo
  }

  public render() {
    const { fileList } = this.state
    const { disabled, acceptType } = this.props
    return (
      <Upload
        name='file'
        accept={acceptType || 'image/*'}
        headers={this.getHeaders()}
        listType='picture-card'
        className='avatar-uploader'
        action={`${configs.apiHost}upload`}
        fileList={fileList}
        disabled={disabled}
        // beforeUpload={this.beforeUpload}
        onChange={this.handleChange}
        onPreview={this.handlePreview}
      >
        {this.renderUploadBtn()}
      </Upload>
    )
  }

  private getHeaders() {
    const { token } = storage.get(['token'])
    return {
      authorization: token
    }
  }

  private handlePreview(file: UploadFile) {
    const { onPreview } = this.props
    onPreview(file)
  }

  private renderUploadBtn() {
    const { loading } = this.state
    const { count, fileList } = this.props
    if ((fileList || []).length >= count) {
      return ''
    }
    return (
      <div>
        <Icon type={loading ? 'loading' : 'plus'} />
        <div className='ant-upload-text'>上传文件</div>
      </div>
    )
  }

  // private beforeUpload(file: File, fileList?: File[]): boolean {
  //   // todo
  //   return true
  // }

  private async handleChange(result: { file: UploadFile, fileList: UploadFile[] }) {
    const { file, fileList } = result
    const { response, status } = file
    const { onSuccess, fieldname, onUploading } = this.props
    onUploading(fieldname, fileList)
    if (status === 'uploading') {
      await this.setState({ loading: true })
    } else if (status === 'done') {
      const { data: { url }, code, message } = response
      if (code !== 0) {
        return this.$message.error(message)
      }
      await this.setState({ loading: false, imageUrl: url, fileList })
      onSuccess(fieldname, fileList)
    }
  }

}
